<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        .p-box p:hover{
            cursor: pointer;
        }
    </style>
    <script>
        document.myReady(function(){
            //1 选择p 标签 使之背景颜色变化
            let domP = document.getElementsByClassName('p-box')[0].getElementsByTagName('p');
            let domPLength = domP.length;
            //1 选择事件处理程序
            let clickFun = function(e){
                if(!e.ctrlKey){
                    for(let i = 0; i < domPLength; i ++){
                        this.parentElement.children[i].style.backgroundColor = '';
                    }
                }                   
                this.style.backgroundColor = '#ccc';                    
            }
            //主函数    
            for(let i = 0; i < domPLength; i ++){
                domP[i].onclick = clickFun;
            }           
        });
        
    </script>
</head>
<body>
    <div class="p-box">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
        <p>我是段落5</p>
    </div>
</body>
</html>